<template>
  <view>
    <view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 u-p-t-30">
      <view class="u-m-r-10">
        <u-avatar :src="userInfo.avatarUrl" size="140"></u-avatar>
      </view>
      <view class="u-flex-1 u-p-l-30">
        <view class="u-font-18">{{ userInfo.nickName }}</view>
      </view>

      <view class="u-m-l-10 u-p-10">
        <u-icon name="arrow-right" color="#969799" size="28"></u-icon>
      </view>
    </view>

    <view class="u-m-t-30">
      <u-cell-group>
        <u-cell-item
          @click="handleHind"
          icon="rmb-circle"
          title="赞赏"
        ></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-30">
      <u-cell-group>
        <u-cell-item @click="handleHind" icon="star" title="收藏">
        </u-cell-item>
        <u-cell-item
          @click="handleHind"
          icon="photo"
          title="相册"
        ></u-cell-item>
        <u-cell-item
          @click="handleHind"
          icon="heart"
          title="关注"
        ></u-cell-item>
        <u-cell-item
          @click="handleHind"
          icon="zhihu-circle-fill"
          title="知乎"
        ></u-cell-item>
        <u-cell-item
          @click="handleHind"
          icon="weibo"
          title="微博"
        ></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-30">
      <u-cell-group>
        <u-cell-item
          @click="handleHind"
          icon="setting"
          title="设置"
        ></u-cell-item>
      </u-cell-group>
    </view>
    <view class="u-m-t-20">
      <u-cell-group>
        <!-- <u-cell-item icon="setting" title="设置"></u-cell-item> -->
        <u-button
          type="primary"
          open-type="contact"
          send-message-title="小书生"
          ripple
          ripple-bg-color="#909399"
        >
          <u-icon name="server-man" size="38"></u-icon>
          联系我们
        </u-button>
      </u-cell-group>
    </view>
    <view class="u-m-t-20">
      <u-cell-group>
        <u-button
          type="primary"
          @click="getUser"
          ripple
          ripple-bg-color="#909399"
          >点我获取头像和名称</u-button
        >
      </u-cell-group>
    </view>
    <!-- 弹窗显示 -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: uni.getStorageSync('todos_user') || {
        avatarUrl: '',
        nickName: '请登录哈',
      },
    };
  },

  methods: {
    // <button open-type="getUserInfo" @click="getUserProfile">点我获取</button>
    getUser() {
      // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
      // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
      uni.getUserProfile({
        desc: '用于完善个人中心资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          console.log(res);
          this.userInfo = res.userInfo;
          uni.setStorageSync('todos_user', res.userInfo);
        },
      });
    },
    // 提示信息
    handleHind() {
      this.$refs.uToast.show({
        title: '功能暂未完善',
        type: 'primary',
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #ededed;
}

.camera {
  width: 54px;
  height: 44px;

  &:active {
    background-color: #ededed;
  }
}
.user-box {
  background-color: #fff;
}
</style>
